import styles from './login.css';
import { Form, Input, Button, Pagination, message, Breadcrumb, Card, Space, Table, Upload, Modal } from 'antd';
import axios from '../utils/index';
import { UploadOutlined,ExclamationCircleOutlined  } from '@ant-design/icons';
import { useEffect, useState } from 'react';
const { Search } = Input;
const { confirm } = Modal;
export default function Goods(props) {
    const [dataSource, setdata] = useState()
    const [isModalVisible, setisModalVisible] = useState(false)
    const [isModalVisibleupd, setisModalVisibleupd] = useState(false)
    const [id,setid]=useState()
    const [goodname,setgoodname]=useState()
    const [goodprice,setgoodprice]=useState()
    const [goodnum,setgoodnum]=useState()
    const [goodweight,setgoodweight]=useState()
    const [total,settotal]=useState()
    const columns = [
        {
            title: '#',
            dataIndex: 'goods_id',
            key: 'goods_id',
        },
        {
            title: '商品名称',
            dataIndex: 'goods_name',
            key: 'goods_name',
        },
        {
            title: '商品价格',
            dataIndex: 'goods_price',
            key: 'goods_price',
        },
        {
            title: '商品重量',
            dataIndex: 'goods_weight',
            key: 'goods_weight',
        },
        {
            title: '创建时间',
            dataIndex: 'add_time',
            key: 'add_time',
        },
        {
            title: '操作',
            key: 'action',
            render: record => (
                <Space size="middle">
                    <Button onClick={upd.bind(this,record)} type="primary">编辑商品</Button>
                    <Button onClick={del.bind(this,record.goods_id)} type="primary">删除商品</Button>
                </Space>
            ),
        },
    ];
    var query = {
        page: 1,
        pagesize: 5,
    }
    useEffect(() => {
        getgoods()
    }, [])
    const getgoods = async () => {
        var res = await axios.get('goods', {
            params: {
                pagenum: query.page,
                pagesize: query.pagesize
            }
        })
        settotal(res.data.total) 
        setdata(res.data.goods)
    }
    const onSearch = (value) => {
        var list=[]
        dataSource.forEach(item => {
            if(item.goods_name.includes(value)){
                list.push(item)
            }
        });
        setdata(list)
    }
    const onFinish = async (value) => {
        var res = await axios.post('goods', {
            goods_name: value.name,
            goods_cat: '1,2,3',
            goods_price: value.price,
            goods_number: value.num,
            goods_weight: value.weight
        })
        if (res.meta.status === 201) {
            message.success("商品添加成功")
            setisModalVisible(false)
            getgoods()
        }
    }
    const addgoods = () => {
        setisModalVisible(true)
    }
    const pagechange=(page,pagesize)=>{
        query.page=parseInt(page)
        query.pagesize=parseInt(pagesize)
        getgoods()
    }
    const del=(id)=>{

        confirm({
            title: '您确定要删除吗?',
            icon: <ExclamationCircleOutlined />,
            async onOk () {
                var res=await axios.delete(`goods/${id}`)
                if(res.meta.status===200){
                    message.success("删除成功")
                    getgoods()
                }
            },
            onCancel() {
              console.log('Cancel');
            },
          });
    }
    const setname=(e)=>{
        setgoodname(e.target.value)
    }
    const setprice=(e)=>{
        setgoodprice(e.target.value)
    }
    const setnum=(e)=>{
        setgoodnum(e.target.value)
    }
    const setweight=(e)=>{
        setgoodweight(e.target.value)
    }
    const upd=(item)=>{
        console.log(item)
        setid(item.goods_id)
        setgoodname(item.goods_name)
        setgoodprice(item.goods_price)
        setgoodnum(item.goods_number)
        setgoodweight(item.goods_weight)
        setisModalVisibleupd(true)
    }
    const updgood=async ()=>{
        var res=await axios.put(`goods/${id}`,{
            goods_name:goodname,
            goods_price:goodprice,
            goods_number:goodnum,
            goods_weight:goodweight
        })
        if(res.meta.status===200){
            message.success("商品修改成功")
            setisModalVisibleupd(false)
            getgoods()
        }
    }
    const cancel=()=>{
        setisModalVisible(false)

    }
    const cancel1=()=>{
        setisModalVisibleupd(false)
        // setgoodname('')
    }
    return (
        <div style={{ background: "azure", height: "100%" }}>
            <p >
                <Breadcrumb style={{paddingLeft:"15px",paddingTop:"15px"}}>
                    <Breadcrumb.Item>首页</Breadcrumb.Item>
                    <Breadcrumb.Item>
                        <a href="">商品管理</a>
                    </Breadcrumb.Item>
                    <Breadcrumb.Item>
                        <a href="">商品列表</a>
                    </Breadcrumb.Item>
                </Breadcrumb>
            </p>
            <Card style={{ width: "95%", margin: "10px 10px" }}>
                <Search placeholder="请输入内容" onSearch={onSearch} style={{ width: 400 }} />
                <Button type="primary" onClick={addgoods}>添加商品</Button>
                <Table dataSource={dataSource} columns={columns} pagination={false} />
                <Pagination
                    total={total}
                    defaultCurrent={query.page}
                    pageSize={5}
                    showTotal={total => `Total ${total} items`}
                    onChange={pagechange}
                />
            </Card>

            <Modal title="添加商品" visible={isModalVisible} footer={null}>
                <Form
                    name="basic"
                    labelCol={{ span: 5 }}
                    wrapperCol={{ span: 16 }}
                    initialValues={{ remember: true }}
                    onFinish={onFinish}
                    autoComplete="off"
                >
                    <Form.Item
                        label="商品名称"
                        name="name"
                        rules={[{ required: true, message: 'Please input your username!' }]}
                    >
                        <Input />
                    </Form.Item>

                    <Form.Item
                        label="商品价格"
                        name="price"
                        rules={[{ required: true, message: 'Please input your password!' }]}
                    >
                        <Input />
                    </Form.Item>
                    <Form.Item
                        label="商品数量"
                        name="num"
                        rules={[{ required: true, message: 'Please input your password!' }]}
                    >
                        <Input />
                    </Form.Item>
                    <Form.Item
                        label="商品重量"
                        name="weight"
                        rules={[{ required: true, message: 'Please input your password!' }]}
                    >
                        <Input />
                    </Form.Item>
                    <Form.Item
                        label="商品图片"
                        name="pic"
                    >
                        <Upload>
                            <Button icon={<UploadOutlined />}>点击上传</Button>
                        </Upload>
                    </Form.Item>


                    <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
                        <Button type="primary" htmlType="submit">
                            添加
                        </Button>
                        <Button type="primary" onClick={cancel} style={{marginLeft:"15px"}}>
                            取消
                        </Button>
                    </Form.Item>
                </Form>
            </Modal>

            <Modal title="编辑商品" visible={isModalVisibleupd} footer={null}>
                <Form
                    name="basic"
                    labelCol={{ span: 5 }}
                    wrapperCol={{ span: 16 }}
                    initialValues={{ remember: true }}
                    autoComplete="off"
                >
                    <Form.Item
                        label="商品名称"
                        name="name"
                        rules={[{ required: true, message: 'Please input your username!' }]}
                    >
                        <Input key={id} defaultValue={goodname}   onChange={setname}  />
                    </Form.Item>

                    <Form.Item
                        label="商品价格"
                        name="price"
                        rules={[{ required: true, message: 'Please input your password!' }]}
                    >
                        <Input key={id} defaultValue={goodprice} onChange={setprice} />
                    </Form.Item>
                    <Form.Item
                        label="商品数量"
                        name="num"
                        rules={[{ required: true, message: 'Please input your password!' }]}
                    >
                        <Input key={id} defaultValue={goodnum} onChange={setnum} />
                    </Form.Item>
                    <Form.Item
                        label="商品重量"
                        name="weight"
                        rules={[{ required: true, message: 'Please input your password!' }]}
                    >
                        <Input key={id} defaultValue={goodweight} onChange={setweight}/>
                    </Form.Item>
                    <Form.Item
                        label="商品图片"
                        name="pic"
                    >
                        <Upload>
                            <Button icon={<UploadOutlined />}>点击上传</Button>
                        </Upload>
                    </Form.Item>


                    <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
                        <Button type="primary" onClick={updgood}>
                            添加
                        </Button>
                        <Button type="primary" onClick={cancel1} style={{marginLeft:"15px"}}>
                            取消
                        </Button>
                    </Form.Item>
                </Form>
            </Modal>
        </div>
    )
}